<template>
    <div class="content" v-loading="load">
        <el-form label-width="70">
            <el-form-item class="imgBox" label="座位编号">
                <el-input type="text" v-model="seatData.seatOne.seatid"></el-input></el-form-item>
                <el-form-item>
                        <el-select placeholder="选择楼层" v-model="seatData.seatOne.fid">
                            <el-option v-for="item in seatData.floorList" :label="item.floor" :value="item.fid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-select placeholder="选择状态" v-model="seatData.seatOne.state">
                            <el-option :value="0" :label="'维护'"></el-option>
                            <el-option :value="1" :label="'正常'"></el-option>
                            <el-option :value="2" :label="'废弃'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select placeholder="选择类型" v-model="seatData.seatOne.seattype">
                            <el-option v-for="item in seatData.typeseatList" :label="item.type" :value="item.typeid"></el-option>
                        </el-select>
                    </el-form-item>
            <el-form-item label="座位地址">
                <el-input type="text" v-model="seatData.seatOne.seataddress"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">

import { reqAddSeat, reqAddSeatType, reqGetFloorList, reqGetSeatTypeList, reqUpdateSeat, reqUpdateSeatType } from '@/api/common';
import { FloorType } from '@/types/floor';
import { Seat, SeatType } from '@/types/seat';
import { tip } from '@/utils/alert';
import { getBase64 } from '@/utils/commonUse';
import { UploadProps } from 'element-plus';
import { fa } from 'element-plus/es/locale';
import Cloud  from 'leancloud-storage';
import { onMounted, reactive, ref, watch } from 'vue';

const seatData=reactive<{seatOne:Seat,floorList:FloorType[],typeseatList:SeatType[]}>({
    seatOne:{
        seatid:'',
        fid:null,
        seattype:null,
        seataddress:'',
        state:1,
    },
    floorList:[],
    typeseatList:[]
})
const load=ref<boolean>(false)

const emits=defineEmits(['emitAdd',"emitChange"])

const type=ref<SeatType>({
    type:"",
    image:''
})
const temp={...seatData.seatOne}
const prop=defineProps<{
    seatOne:Seat|null
}>()
watch(() => prop.seatOne, () => {
    if (prop.seatOne) {
        seatData.seatOne= { ...prop.seatOne }
    }else{
        seatData.seatOne=temp
    }
})

const getFlooList=async()=>{
    let res=await reqGetFloorList()
    seatData.floorList=res.data.data
}

const getTypeseatList=async()=>{
    let res=await reqGetSeatTypeList(50,1)
    seatData.typeseatList=res.data.data.data
}


const save=async()=>{
    load.value=true
    console.log(seatData.seatOne);
    if(prop.seatOne){
        reqUpdateSeat(seatData.seatOne).then(res=>{
            load.value=false
            tip(res.data.info,'success')
            emits('emitChange',{info:res.data.data,bool:false})
        })
    }else{
        reqAddSeat(seatData.seatOne).then(res=>{
            load.value=false
            tip(res.data.info,'success')
            emits('emitAdd',false)
        })
    }
}

onMounted(()=>{
    getFlooList()
    getTypeseatList()
})


</script>

<style lang="scss" scoped>
.content {
    width: 50%;

    .el-button {
        width: 100%;
    }

    .imgBox {
        .avatar-uploader {
            height: 100px;
            width: 100px;
            border: 1px dashed var(--el-border-color);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 200px;
                height: 250px
            }
        }
    }
}</style>